<template>
  <div class="v-container">
    <v-header title="洗车服务">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>返回
      </span>
    </v-header>
    <div class="v-main">

      <div class="qiangBox">
        <img src="@/assets/images/xcfw_banner.jpg" width="100%">
        <div class="qiangContent">

          <div class="remainNum">
            本月剩余名额：
            <span id="remainNum" class="g-color-red">{{oneRemnant}}</span>
            <!-- <p>*由于在线抢购客户较多，剩余名额仅供参考，请尽快参与</p> -->
          </div>
          <div class="rules-title">
            <img src="@/assets/images/bt_hdxz.png" alt="活动规则">
          </div>
          <ul>
            <li>活动期间，持卡人通过四川农信各电子银行渠道“一元靓车”活动界面跳转至指定页面使用银联在线支付（含云闪付APP在线支付），可1元或8.8元享盛大洗车券1张。持卡人须以兴川信用卡白金卡（卡号号段：6250976）、金卡（卡号号段：6250972）、普卡（卡号号段：6250970）在线支付方可享受优惠，购买洗车券成功后不予退款。</li>
            <li>单个持卡人每日限购1次，每自然月限购2次，洗车券自购买成功之日起60日内有效，白金卡每月限量300份，金卡和普卡每月限量2352份。活动期间白金卡总限量900份，金卡和普卡总限量7056份，售完即止。</li>
            <li>持卡人在线购买洗车券后直接到店出示购买成功二维码或短信进行兑换。</li>
            <li>每张洗车券可在盛大洗车服务网点各门店享受普通洗车1次（限七座及以下车型），持卡人可登录四川农信各电子银行渠道查询洗车服务门店，如有门店搬迁、关闭等变更情况，乙方应及时通知持卡人。</li>
            <li>若出现因乙方单方面原因导致发生的交易不能正常进行等影响持卡人无法参与活动的原因，如乙方在线支付网页故障、商户临时停业等，乙方应及时与持卡人直接沟通解决。</li>
          </ul>
        </div>
      </div>

      <div class="bottom-submit">
        <mt-button v-bind:class="{ 'active': isActive }" class="my-button round" @click="validateRule">立即抢购</mt-button>
      </div>
    </div>
  </div>

</template>


<script>
import vHeader from '@/components/Header.vue';
import { Resource } from '@/services/resource';
// import Cookies from 'js-cookie';
// import { MessageBox } from 'mint-ui';

export default {
  name: 'qiang',
  components: {
    vHeader
  },
  data() {
    return {
      oneRemnant: '', // 剩余名额
      btnColor: '#54bc87',
      isActive: false
    };
  },
  mounted() {
    this.GetQuotaNum();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 获取剩余名额
    GetQuotaNum() {
      Resource.getRemainNum.post({}, {}).then(res => {
        this.oneRemnant = res.oneRemnant;
        this.isActive = this.oneRemnant > 0;
      });
    },
    // 获取参与资格
    validateRule() {
      if (!this.isActive) return;
      Resource.getValidateRule.post({}, {}).then(res => {
        console.log(res);
        this.pageTo('pay');
      });
    },
    // 跳转页面
    pageTo(name) {
      console.log(name);
      this.$router.push(name);
    }
  }
};
</script>

<style lang="less" scoped>
@import url('./activity.less');
</style>
